<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width:100px;height:100px;background-color:red;"></div>


    <!-- <script>
        // click(只包括左键) = mousedown + mouseup(右键滚轮也可以触发)

        document.onclick = function(){
            console.log('click');
        }
        document.onmousedown = function(){
            console.log('mousedown');
        }
        document.onmouseup = function() {
            console.log('mouseup');
        }

        // contextmenu  右键弹出菜单事件，只用于取消默认弹出菜单

        var div = document.getElementsByTagName('div')[0];

        // mousemove 鼠标移动事件

        div.onmousemove = function() {
            console.log('mousemove');
        }

        // mouseover mouseout 
        // mouseenter mouseleave //新规范，和上面两个事件一样


    //    div.onmouseover = function(e) {
    //        console.log('mouseover');
    //        console.log(e)
    //        this.style.backgroundColor = "yellow";
    //    }// 鼠标移上去的时候触发

    //    div.onmouseout = function() {
    //        this.style.backgroundColor = "green";
    //    }// 鼠标离开时触发

        
        div.onmouseenter = function() {
            console.log('mouseenter');
            div.style.backgroundColor = "yellow";
        }// 鼠标移上去的时候触发// css的hover效果就是这个写成的

        div.onmouseleave = function() {
            div.style.backgroundColor = "#0099ff";
        }// 鼠标离开时触发
    </script> -->

    <!-- <script>
        //区分鼠标的左右键
        // mouseup 一样的
        document.onmousedown = function(e) {
            console.log(e); // e.button 可以区分是左键还是右键被点击
            if(e.button == 2){  // e.button 默认为0
                console.log('right');
            }else if(e.button == 0){
                console.log('left');
            }else if(e.button == 1){
                console.log('滚轮');
            }
        }

    </script> -->


    <script>
        // 长按不触发click事件，应该怎么做
        // 这样就可以实现只拖拽不点击
        var firstTime = 0;
        var lastTime = 0;
        var key = false;

        document.onmousedown = function(){
            console.log('mousedown');
            firstTime = new Date().getTime();
        }
        document.onmouseup = function() {
            console.log('mouseup');
            lastTime = new Date().getTime();
            if(lastTime - firstTime < 300){
                key = true;
            }
        }
        document.onclick = function() {
            if(key){
                console.log('单击事件');
                key = false;
            }
        }


    </script>
</body>
</html>